﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Buttons</title>
		<link rel="shortcut icon" type="image/x-icon" href="Vertical/favicon.ico">
		<!-- google font -->
		<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/ionicons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/simple-line-icons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/responsive.css" rel="stylesheet">
	</head>
	<body>
		<div class="wrapper">
			<!-- header -->
			<header class="main-header">
				<div class="container_header">
					<div class="logo d-flex align-items-center">
						<a href="#"> <strong class="logo_icon"> <img src="assets/images/small-logo.png" alt=""> </strong> <span class="logo-default"> <img src="assets/images/logo2.png" alt=""> </span> </a>
						<div class="icon_menu full_menu">
							<a href="#" class="menu-toggler sidebar-toggler"></a>
						</div>
					</div>
					<div class="right_detail">
						<div class="row d-flex align-items-center min-h pos-md-r">
							<div class="col-xl-5 col-3 search_col ">
								<div class="top_function">

									<div class="search">
										<a id="toggle_res_search" data-toggle="collapse" data-target="#search_form" class="res-only-view collapsed" href="javascript:void(0);"
										aria-expanded="false"> <i class=" icon-magnifier"></i> </a>
										<form id="search_form" role="search" class="search-form collapse" action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search...">
												<button type="button" class="btn" data-target="#search_form" data-toggle="collapse" aria-label="Close">
													<i class="ion-android-search"></i>
												</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="col-xl-7 col-9 d-flex justify-content-end">
								<div class="right_bar_top d-flex align-items-center">

									<!-- notification_Start -->
									<div class="dropdown dropdown-notification">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"> <i class="fa fa-bell-o"></i> <span class="badge_coun"> 6 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Notifications</span></h3>
												<span class="notification-label">New 6</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="javascript:;"> <span class="time">just now</span> <span class="details"> <span class="notification-icon deepPink-bgcolor"> <i class="fa fa-check"></i> </span> Congratulations!. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">3 mins</span> <span class="details"> <span class="notification-icon purple-bgcolor"> <i class="fa fa-user o"></i> </span> <b>John Micle </b>is now following you. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">7 mins</span> <span class="details"> <span class="notification-icon blue-bgcolor"> <i class="fa fa-comments-o"></i> </span> <b>Sneha Jogi </b>sent you a message. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">12 mins</span> <span class="details"> <span class="notification-icon pink"> <i class="fa fa-heart"></i> </span> <b>Ravi Patel </b>like your photo. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">15 mins</span> <span class="details"> <span class="notification-icon yellow"> <i class="fa fa-warning"></i> </span> Warning! </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">10 hrs</span> <span class="details"> <span class="notification-icon red"> <i class="fa fa-times"></i> </span> Application error. </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!-- notification_End -->
									<!-- DropDown_Inbox -->
									<div class="dropdown dropdown-inbox">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="fa fa-envelope-o"></i> <span class="badge_coun"> 2 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Messages</span></h3>
												<span class="notification-label">New 2</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!--DropDown_Inbox_End -->
									<!-- Dropdown_User -->
									<div class="dropdown dropdown-user">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <img class="img-circle pro_pic" src="assets/images/about-1.jpg" alt=""> </a>
										<ul class="dropdown-menu dropdown-menu-default">
											<li>
												<a href="#"> <i class="icon-user"></i> Profile </a>
											</li>
											<li>
												<a href="#"> <i class="icon-settings"></i> Settings </a>
											</li>
											<li>
												<a href="#"> <i class="icon-directions"></i> Help </a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="lock_screen.html"> <i class="icon-lock"></i> Lock </a>
											</li>
											<li>
												<a href="#"> <i class="icon-logout"></i> Log Out </a>
											</li>
										</ul>
									</div>
									<!-- Dropdown_User_End -->
								</div>
							</div>
						</div>
					</div>
				</div>

			</header>
			<!-- header_End -->

			<!-- Content_right -->
			<div class="container_full">

				<div class="side_bar scroll_auto">
                <div class="user-panel">
						<div class="user_image">
							<img src="assets/images/about-1.jpg" class="img-circle mCS_img_loaded" alt="User Image">
						</div>
						<div class="info">
							<p>
								Alexander Pierce
							</p>
							<a href="#"> <i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>

					<ul id="dc_accordion" class="sidebar-menu tree">
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-home"></i> <span>Dashboard</span> 
							<span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="index.html">Dashboard 1</a>
								</li>
								<li>
									<a href="index1.html">Dashboard 2</a>
								</li>
								<li>
									<a href="index2.html">E-Commerce</a>
								</li>
								<li>
									<a href="index3.html">Analysis</a>
								</li>
								
								<li>
									<a href="index-green.html">Dashboard Green</a>
								</li>
								<li>
									<a href="index-orange.html">Dashboard Orange</a>
								</li>
								<li>
									<a href="index-purple.html">Dashboard Purple</a>
								</li>
								<li>
									<a href="index-red.html">Dashboard Red</a>
								</li>
								</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-newspaper-o"></i> <span>UI Elements </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="alert.html">Alerts</a>
								</li>
								<li>
									<a href="buttons.html">Buttons</a>
								</li>
								<li>
									<a href="cards.html">Cards</a>
								</li>
								<li>
									<a href="dropdown.html">Dropdowns</a>
								</li>
								<li>
									<a href="grid.html">Grids</a>
								</li>
								<li>
									<a href="lists.html">Lists</a>
								</li>
								<li>
									<a href="modal.html">Modals</a>
								</li>
								<li>
									<a href="progress.html"> Progress</a>
								</li>
								<li>
									<a href="popover-tooltips.html">Popover &amp; Tooltips</a>
								</li>
								<li>
									<a href="typography.html">Typography</a>
								</li>
								<li>
									<a href="tabs.html">Tabs</a>
								</li>
								<li>
									<a href="tree.html">Tree</a>
								</li>
								<li>
									<a href="toastr.html">Toastr Notification</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-pie-chart"></i> <span>Portlets</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="portlet-base.html">Portlets Base</a>
								</li>
								<li>
									<a href="portlet-advanced.html">Portlets Advanced</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-laptop"></i> <span>Icons</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="icon-font-awesome.html">Fontawesome Icons</a>
								</li>
								<li>
									<a href="icon-simple-line.html">Simple line Icons</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-table"></i> <span>Widgets </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="widgets-base.html">Widgets Base</a>
								</li>
								<li>
									<a href="widgets-chart.html">Widgets Chart</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-calendar"></i> <span>Calendar </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="calendar-basic.html">Basic Calendar</a>
								</li>
								<li>
									<a href="calendar-external-events.html">External Events Calendar</a>
								</li>
								<li>
									<a href="calendar-list.html">List Calendar</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-wpforms"></i> <span>Forms</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li class="menu_sub">
									<a href="#">Form Control <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-basic-input.html">Basic Input</a>
										</li>
										<li>
											<a href="form-input-group.html">Input Group</a>
										</li>
										<li>
											<a href="form-checkbox-radio.html">Checkbox & Radio</a>
										</li>
									</ul>
								</li>
								<li class="menu_sub">
									<a href="#">Form Validation <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-validation-basic.html">Basic Validation</a>
										</li>
										<li>
											<a href="form-validation-jquery.html">jQuery Validation</a>
										</li>
										<li>
											<a href="form-wizard.html">Form Wizard</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="icon-grid"></i> <span>Data Tables</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="table-basic.html">Basic Table</a>
								</li>
								<li class="menu_sub">
									<a href="#">Data Tables <span class="arrow"></span> </a>
									<ul class="down_menu">
										<li>
											<a href="table-datatable.html">Basic Datatable</a>
										</li>
										<li>
											<a href="table-datatable-show-hide.html">Toggle Col Datatable</a>
										</li>
										<li>
											<a href="table-datatable-ajax.html">Ajax Datatable</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-bar-chart text-aqua"></i> <span>Charts</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="flot-chart.html">Flot Charts</a>
								</li>
								<li>
									<a href="echart.html">eCharts</a>
								</li>
								<li>
									<a href="morris-chart.html">Morris Charts</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-file text-aqua"></i> <span>Extra Pages</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="profile.html">User Profile</a>
								</li>
								<li>
									<a href="page-login.html">Sign In</a>
								</li>
								<li>
									<a href="page-register.html">Sign Up</a>
								</li>
								<li>
									<a href="invoice.html">Invoice</a>
								</li>
								<li>
									<a href="page_404.html">404</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<!--main contents start-->
				<main class="content_wrapper">
					<!--page title start-->
					<div class="page-heading">
						<div class="container-fluid">
							<div class="row d-flex align-items-center">
								<div class="col-md-6">
									<div class="page-breadcrumb">
										<h1>Buttons</h1>
									</div>
								</div>
								<div class="col-md-6 justify-content-md-end d-md-flex">
									<div class="breadcrumb_nav">
										<ol class="breadcrumb">
											<li>
												<i class="fa fa-home"></i><a class="parent-item" href="index.html">Home</a><i class="fa fa-angle-right"></i>
											</li>
											<li class="active">
												Buttons
											</li>
										</ol>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--page title end-->

					<div class="container-fluid">
						<div class="row">
							<div class="col ">
								<ul class="nav nav-pills mb-4" role="tablist">
									<li class="nav-item">
										<a class="nav-link active default-color" data-toggle="tab" href="#tab-1" aria-expanded="true">Default Buttons</a>
									</li>
									<li class="nav-item">
										<a class="nav-link default-color" data-toggle="tab" href="#tab-2" aria-expanded="false">Square Buttons</a>
									</li>
									<li class="nav-item">
										<a class="nav-link default-color" data-toggle="tab" href="#tab-3" aria-expanded="false">Pill Buttons</a>
									</li>
									<li class="nav-item">
										<a class="nav-link default-color" data-toggle="tab" href="#tab-4" aria-expanded="false">Icon Buttons</a>
									</li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane active" id="tab-1" role="tabpanel" aria-expanded="true">
										<div class="row">
											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Default Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="">
															Bootstrap buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-primary">
																Primary
															</button>
															<button type="button" class="btn btn-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-success">
																Success
															</button>
															<button type="button" class="btn btn-danger">
																Danger
															</button>
															<button type="button" class="btn btn-warning">
																Warning
															</button>
															<button type="button" class="btn btn-info">
																Info
															</button>
															<button type="button" class="btn btn-light">
																Light
															</button>
															<button type="button" class="btn btn-dark">
																Dark
															</button>
															<button type="button" class="btn btn-link">
																Link
															</button>
														</div>
														<p class="">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-primary" href="#" role="button">Link</a>
															<button class="btn btn-info" type="submit">
																Button
															</button>
															<input class="btn btn-success" type="button" value="Input">
															<input class="btn btn-warning" type="submit" value="Submit">
															<input class="btn btn-danger" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
													</div>
												</div>
											</div>
											<!--buttons end-->

											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Outline Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="text-muted">
															Bootstrap outline buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-outline-primary">
																Primary
															</button>
															<button type="button" class="btn btn-outline-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-outline-success">
																Success
															</button>
															<button type="button" class="btn btn-outline-danger">
																Danger
															</button>
															<button type="button" class="btn btn-outline-warning">
																Warning
															</button>
															<button type="button" class="btn btn-outline-info">
																Info
															</button>
															<button type="button" class="btn btn-outline-light">
																Light
															</button>
															<button type="button" class="btn btn-outline-dark">
																Dark
															</button>
														</div>
														<p class="text-muted">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-outline-primary" href="#" role="button">Link</a>
															<button class="btn btn-outline-info" type="submit">
																Button
															</button>
															<input class="btn btn-outline-success" type="button" value="Input">
															<input class="btn btn-outline-danger" type="submit" value="Submit">
															<input class="btn btn-outline-warning" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-outline-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-outline-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-outline-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-outline-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-outline-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-outline-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-outline-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-outline-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-outline-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-outline-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-outline-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-outline-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-outline-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-outline-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-outline-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
													</div>
												</div>
											</div>
											<!--buttons end-->
										</div>
									</div>
									<div class="tab-pane" id="tab-2" role="tabpanel" aria-expanded="false">
										<div class="row">
											<!--buttons start-->
											<div class="col">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Default Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="">
															Bootstrap buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-primary">
																Primary
															</button>
															<button type="button" class="btn btn-square btn-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-square btn-success">
																Success
															</button>
															<button type="button" class="btn btn-square btn-danger">
																Danger
															</button>
															<button type="button" class="btn btn-square btn-warning">
																Warning
															</button>
															<button type="button" class="btn btn-square btn-info">
																Info
															</button>
															<button type="button" class="btn btn-square btn-light">
																Light
															</button>
															<button type="button" class="btn btn-square btn-dark">
																Dark
															</button>
															<button type="button" class="btn btn-square btn-link">
																Link
															</button>
														</div>
														<p class="">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-square btn-primary" href="#" role="button">Link</a>
															<button class="btn btn-square btn-info" type="submit">
																Button
															</button>
															<input class="btn btn-square btn-success" type="button" value="Input">
															<input class="btn btn-square btn-warning" type="submit" value="Submit">
															<input class="btn btn-square btn-danger" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-square btn-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-square btn-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-square btn-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-square btn-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-square btn-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-square btn-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-square btn-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-square btn-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-square btn-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-square btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-square btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
													</div>
												</div>
											</div>
											<!--buttons end-->

											<!--buttons start-->
											<div class="col">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Outline Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="text-muted">
															Bootstrap outline buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-outline-primary">
																Primary
															</button>
															<button type="button" class="btn btn-square btn-outline-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-square btn-outline-success">
																Success
															</button>
															<button type="button" class="btn btn-square btn-outline-danger">
																Danger
															</button>
															<button type="button" class="btn btn-square btn-outline-warning">
																Warning
															</button>
															<button type="button" class="btn btn-square btn-outline-info">
																Info
															</button>
															<button type="button" class="btn btn-square btn-outline-light">
																Light
															</button>
															<button type="button" class="btn btn-square btn-outline-dark">
																Dark
															</button>
														</div>
														<p class="text-muted">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-square btn-outline-primary" href="#" role="button">Link</a>
															<button class="btn btn-square btn-outline-info" type="submit">
																Button
															</button>
															<input class="btn btn-square btn-outline-success" type="button" value="Input">
															<input class="btn btn-square btn-outline-danger" type="submit" value="Submit">
															<input class="btn btn-square btn-outline-warning" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-outline-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-square btn-outline-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-outline-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-square btn-outline-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-outline-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-square btn-outline-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-outline-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-square btn-outline-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-square btn-outline-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-square btn-outline-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-square btn-outline-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-square btn-outline-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-square btn-outline-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-square btn-outline-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-square btn-outline-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
													</div>
												</div>
											</div>
											<!--buttons end-->
										</div>
									</div>
									<div class="tab-pane" id="tab-3" role="tabpanel" aria-expanded="false">
										<div class="row">
											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Default Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="">
															Bootstrap buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-primary">
																Primary
															</button>
															<button type="button" class="btn btn-pill btn-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-pill btn-success">
																Success
															</button>
															<button type="button" class="btn btn-pill btn-danger">
																Danger
															</button>
															<button type="button" class="btn btn-pill btn-warning">
																Warning
															</button>
															<button type="button" class="btn btn-pill btn-info">
																Info
															</button>
															<button type="button" class="btn btn-pill btn-light">
																Light
															</button>
															<button type="button" class="btn btn-pill btn-dark">
																Dark
															</button>
															<button type="button" class="btn btn-pill btn-link">
																Link
															</button>
														</div>
														<p class="">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-pill btn-primary" href="#" role="button">Link</a>
															<button class="btn btn-pill btn-info" type="submit">
																Button
															</button>
															<input class="btn btn-pill btn-success" type="button" value="Input">
															<input class="btn btn-pill btn-warning" type="submit" value="Submit">
															<input class="btn btn-pill btn-danger" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-pill btn-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-pill btn-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-pill btn-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-pill btn-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-pill btn-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-pill btn-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-pill btn-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-pill btn-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-pill btn-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-pill btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-pill btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
													</div>
												</div>
											</div>
											<!--buttons end-->

											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Outline Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="text-muted">
															Bootstrap outline buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-primary">
																Primary
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary">
																Secondary
															</button>
															<button type="button" class="btn btn-pill btn-outline-success">
																Success
															</button>
															<button type="button" class="btn btn-pill btn-outline-danger">
																Danger
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning">
																Warning
															</button>
															<button type="button" class="btn btn-pill btn-outline-info">
																Info
															</button>
															<button type="button" class="btn btn-pill btn-outline-light">
																Light
															</button>
															<button type="button" class="btn btn-pill btn-outline-dark">
																Dark
															</button>
														</div>
														<p class="text-muted">
															Button tags
														</p>
														<p class="text-muted">
															The <code class="highlighter-rouge">
																.btn</code>
															classes are designed to be used with the <code class="highlighter-rouge">
																&lt;button&gt;</code>
															element. However, you can also use these classes on <code class="highlighter-rouge">
																&lt;a&gt;</code>
															or <code class="highlighter-rouge">
																&lt;input&gt;</code>
															elements.
														</p>
														<div class="btn-demo mb-4">
															<a class="btn btn-pill btn-outline-primary" href="#" role="button">Link</a>
															<button class="btn btn-pill btn-outline-info" type="submit">
																Button
															</button>
															<input class="btn btn-pill btn-outline-success" type="button" value="Input">
															<input class="btn btn-pill btn-outline-danger" type="submit" value="Submit">
															<input class="btn btn-pill btn-outline-warning" type="reset" value="Reset">
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-info btn-lg">
																Large button
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary btn-lg">
																Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-success btn-sm">
																Small button
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning btn-sm">
																Small button
															</button>
														</div>
														<p class="">
															Block Buttons
														</p>
														<p class="text-muted">
															Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">
																.btn-block</code>
															.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-primary btn-lg btn-block">
																Block level button
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary btn-lg btn-block">
																Block level button
															</button>
														</div>
														<p class="">
															Disable Buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-primary" disabled>
																Primary button
															</button>
															<button type="button" class="btn btn-pill btn-outline-success" disabled>
																Success button
															</button>
															<button type="button" class="btn btn-pill btn-outline-danger" disabled>
																Danger button
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning" disabled>
																Warning button
															</button>
															<button type="button" class="btn btn-pill btn-outline-info" disabled>
																Info button
															</button>
															<button type="button" class="btn btn-pill btn-outline-dark" disabled>
																Dark button
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary" disabled>
																Button
															</button>
															<a href="#" class="btn btn-pill btn-outline-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-pill btn-outline-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
														</div>
														
														
													</div>
												</div>
											</div>
											<!--buttons end-->
										</div>
									</div>
									<div class="tab-pane" id="tab-4" role="tabpanel" aria-expanded="false">
										<div class="row">
											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Icon Buttons
														</div>
													</div>
													<div class="card-body">
														<p class="">
															Default Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn  btn-primary">
																<i class="icon-user pr-2"></i> Primary
															</button>
															<button type="button" class="btn  btn-secondary">
																<i class="icon-cloud-upload pr-2"></i> Secondary
															</button>
															<button type="button" class="btn  btn-success">
																<i class="icon-lock pr-2"></i> Success
															</button>
															<button type="button" class="btn  btn-danger">
																<i class="icon-social-dropbox pr-2"></i> Danger
															</button>
															<button type="button" class="btn  btn-warning">
																<i class="icon-key pr-2"></i> Warning
															</button>
															<button type="button" class="btn  btn-info">
																<i class="icon-flag pr-2"></i> Info
															</button>
															<button type="button" class="btn  btn-light">
																<i class="icon-tag pr-2"></i> Light
															</button>
															<button type="button" class="btn  btn-dark">
																<i class="icon-note pr-2"></i> Dark
															</button>
															<button type="button" class="btn  btn-link">
																<i class="icon-pie-chart pr-2"></i> Link
															</button>
														</div>
														<p class="">
															Square Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-primary">
																<i class="icon-rocket pr-2"></i> Primary
															</button>
															<button type="button" class="btn btn-square btn-secondary">
																<i class="icon-trash pr-2"></i> Secondary
															</button>
															<button type="button" class="btn btn-square btn-success">
																<i class="icon-drop pr-2"></i> Success
															</button>
															<button type="button" class="btn btn-square btn-danger">
																<i class="icon-drawer pr-2"></i> Danger
															</button>
															<button type="button" class="btn btn-square btn-warning">
																<i class="icon-feed pr-2"></i> Warning
															</button>
															<button type="button" class="btn btn-square btn-info">
																<i class=" icon-briefcase pr-2"></i> Info
															</button>
															<button type="button" class="btn btn-square btn-light">
																<i class=" icon-basket-loaded pr-2"></i> Light
															</button>
															<button type="button" class="btn btn-square btn-dark">
																<i class=" icon-bubbles pr-2"></i> Dark
															</button>
															<button type="button" class="btn btn-pill btn-link">
																<i class=" icon-diamond pr-2"></i> Link
															</button>
														</div>
														<p class="">
															Pill Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-primary">
																<i class=" icon-globe-alt pr-2"></i> Primary
															</button>
															<button type="button" class="btn btn-pill btn-secondary">
																<i class=" icon-puzzle pr-2"></i> Secondary
															</button>
															<button type="button" class="btn btn-pill btn-success">
																<i class=" icon-fire pr-2"></i> Success
															</button>
															<button type="button" class="btn btn-pill btn-danger">
																<i class=" icon-eyeglass pr-2"></i> Danger
															</button>
															<button type="button" class="btn btn-pill btn-warning">
																<i class=" icon-graduation pr-2"></i> Warning
															</button>
															<button type="button" class="btn btn-pill btn-info">
																<i class=" icon-speedometer pr-2"></i> Info
															</button>
															<button type="button" class="btn btn-pill btn-light">
																<i class=" icon-magic-wand pr-2"></i> Light
															</button>
															<button type="button" class="btn btn-pill btn-dark">
																<i class=" icon-ghost pr-2"></i> Dark
															</button>
															<button type="button" class="btn btn-pill btn-link">
																<i class=" icon-cursor pr-2"></i> Link
															</button>
														</div>
														<p class="text-muted">
															Bootstrap outline buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-primary">
																<i class=" icon-badge pr-2"></i> Primary
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary">
																<i class=" icon-bag pr-2"></i> Secondary
															</button>
															<button type="button" class="btn btn-pill btn-outline-success">
																<i class=" icon-globe pr-2"></i> Success
															</button>
															<button type="button" class="btn btn-pill btn-outline-danger">
																<i class=" icon-folder-alt pr-2"></i> Danger
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning">
																<i class=" icon-book-open pr-2"></i> Warning
															</button>
															<button type="button" class="btn btn-pill btn-outline-info">
																<i class=" icon-puzzle pr-2"></i> Info
															</button>
															<button type="button" class="btn btn-pill btn-outline-light">
																<i class=" icon-compass pr-2"></i> Light
															</button>
															<button type="button" class="btn btn-pill btn-outline-dark">
																<i class=" icon-film pr-2"></i> Dark
															</button>
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-info btn-lg">
																<i class=" icon-plane pr-2"></i> Large button
															</button>
															<button type="button" class="btn btn-pill btn-secondary btn-lg">
																<i class=" icon-plus pr-2"></i> Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-success btn-sm">
																<i class=" icon-directions pr-2"></i> Small button
															</button>
															<button type="button" class="btn btn-pill btn-warning btn-sm">
																<i class=" icon-docs pr-2"></i> Small button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-info btn-lg">
																<i class=" icon-support pr-2"></i>Large button
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary btn-lg">
																<i class=" icon-umbrella pr-2"></i>Large button
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-success btn-sm">
																<i class=" icon-microphone pr-2"></i>Small button
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning btn-sm">
																<i class=" icon-layers pr-2"></i>Small button
															</button>
														</div>
													</div>
												</div>
											</div>
											<!--buttons end-->

											<!--buttons start-->
											<div class="col-xl-6">
												<div class="card card-shadow mb-4">
													<div class="card-header">
														<div class="card-title">
															Icon Buttons without Text
														</div>
													</div>
													<div class="card-body">
														<p class="">
															Default Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn  btn-primary">
																<i class="icon-user "></i>
															</button>
															<button type="button" class="btn  btn-secondary">
																<i class="icon-cloud-upload "></i>
															</button>
															<button type="button" class="btn  btn-success">
																<i class="icon-lock "></i>
															</button>
															<button type="button" class="btn  btn-danger">
																<i class="icon-social-dropbox "></i>
															</button>
															<button type="button" class="btn  btn-warning">
																<i class="icon-key "></i>
															</button>
															<button type="button" class="btn  btn-info">
																<i class="icon-flag "></i>
															</button>
															<button type="button" class="btn  btn-light">
																<i class="icon-tag "></i>
															</button>
															<button type="button" class="btn  btn-dark">
																<i class="icon-note "></i>
															</button>
															<button type="button" class="btn  btn-link">
																<i class="icon-pie-chart "></i>
															</button>
														</div>
														<p class="">
															Square Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-square btn-primary">
																<i class="icon-rocket "></i>
															</button>
															<button type="button" class="btn btn-square btn-secondary">
																<i class="icon-trash "></i>
															</button>
															<button type="button" class="btn btn-square btn-success">
																<i class="icon-drop "></i>
															</button>
															<button type="button" class="btn btn-square btn-danger">
																<i class="icon-drawer "></i>
															</button>
															<button type="button" class="btn btn-square btn-warning">
																<i class="icon-feed "></i>
															</button>
															<button type="button" class="btn btn-square btn-info">
																<i class=" icon-briefcase "></i>
															</button>
															<button type="button" class="btn btn-square btn-light">
																<i class=" icon-basket-loaded "></i>
															</button>
															<button type="button" class="btn btn-square btn-dark">
																<i class=" icon-bubbles "></i>
															</button>
															<button type="button" class="btn btn-pill btn-link">
																<i class=" icon-diamond "></i>
															</button>
														</div>
														<p class="">
															Pill Icon buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-primary">
																<i class=" icon-globe-alt "></i>
															</button>
															<button type="button" class="btn btn-pill btn-secondary">
																<i class=" icon-puzzle "></i>
															</button>
															<button type="button" class="btn btn-pill btn-success">
																<i class=" icon-fire "></i>
															</button>
															<button type="button" class="btn btn-pill btn-danger">
																<i class=" icon-eyeglass "></i>
															</button>
															<button type="button" class="btn btn-pill btn-warning">
																<i class=" icon-graduation "></i>
															</button>
															<button type="button" class="btn btn-pill btn-info">
																<i class=" icon-speedometer "></i>
															</button>
															<button type="button" class="btn btn-pill btn-light">
																<i class=" icon-magic-wand "></i>
															</button>
															<button type="button" class="btn btn-pill btn-dark">
																<i class=" icon-ghost "></i>
															</button>
															<button type="button" class="btn btn-pill btn-link">
																<i class=" icon-cursor "></i>
															</button>
														</div>
														<p class="text-muted">
															Bootstrap outline buttons
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-primary">
																<i class=" icon-badge "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary">
																<i class=" icon-bag "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-success">
																<i class=" icon-globe "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-danger">
																<i class=" icon-folder-alt "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning">
																<i class=" icon-book-open "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-info">
																<i class=" icon-puzzle "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-light">
																<i class=" icon-compass "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-dark">
																<i class=" icon-film "></i>
															</button>
														</div>
														<p class="">
															Button Size
														</p>
														<p  class="text-muted">
															Fancy larger or smaller buttons? Add <code class="highlighter-rouge">
																.btn-lg</code>
															or <code class="highlighter-rouge">
																.btn-sm</code>
															for additional sizes.
														</p>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-info btn-lg">
																<i class=" icon-plane "></i>
															</button>
															<button type="button" class="btn btn-pill btn-secondary btn-lg">
																<i class=" icon-plus "></i>
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-success btn-sm">
																<i class=" icon-directions "></i>
															</button>
															<button type="button" class="btn btn-pill btn-warning btn-sm">
																<i class=" icon-docs "></i>
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-info btn-lg">
																<i class=" icon-support "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-secondary btn-lg">
																<i class=" icon-umbrella "></i>
															</button>
														</div>
														<div class="btn-demo mb-4">
															<button type="button" class="btn btn-pill btn-outline-success btn-sm">
																<i class=" icon-microphone "></i>
															</button>
															<button type="button" class="btn btn-pill btn-outline-warning btn-sm">
																<i class=" icon-layers "></i>
															</button>
														</div>
													</div>
												</div>
											</div>
											<!--buttons end-->
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>
				<!--main contents end-->

			</div>
			<!-- Content_right -->

			<!-- Footer -->
			<footer class="footer ptb-20">
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="copy_right">
							<p>
								2018 © Dashboard Theme By
								<a href="http://www.17sucai.com/">Jeparo</a>
							</p>
						</div>
						<a id="back-to-top" href="#"> <i class="ion-android-arrow-up"></i> </a>
					</div>
				</div>
			</footer>
			<!-- Footer_End -->

		</div>
		<script type="text/javascript" src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/popper.min.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
		<script src="assets/js/custom.js" type="text/javascript"></script>
	</body>
</html>
